<template>
  <div class="browsegoods">
      <div class="good" v-for="item in list" :key='item.id'>
        <img :src="item.img" alt="未加载图片" class='preview-img' style="width:100;height:100" @click="$preview.open(item.id,list)">
        <div class="mui-ellipsis-3 title" >
          {{item.title}}
        </div>
        <div class="bottom">
          <div>
            <span class="now-price">￥{{item.nowPrice}}</span> <span class="old-price">￥{{item.oldPrice}}</span>
          </div>
          <div class="hot">
            <span>热卖中</span>
            <span>剩{{item.num}}</span>
          </div>
        </div>
      </div>
  </div>
</template>

<script>
export default {
  name: 'browsegoods',
  data() { 
    return {
      list:[
        {id:0,img:"http://img.alicdn.com/bao/uploaded/i4/TB14kUhhiLaK1RjSZFxlECmPFXa_100611.jpg",oldPrice:3888,nowPrice:1890,title:"HUAWEI Nova 4 4800万三摄 极点全面屏",num:232},
        {id:2,img:"http://g-search3.alicdn.com/img/bao/uploaded/i4/i4/11247811/TB2pLfFawfH8KJjy1zcXXcTzpXa_!!11247811.jpg_360x360Q90.jpg",oldPrice:3888,nowPrice:1890,title:"高价回收二手手机苹果id锁iPhonex/8/7plus/三星",num:232},
        {id:3,img:"http://g-search2.alicdn.com/img/bao/uploaded/i4/i1/24284964/O1CN01ftn4ip1mXYc4VW4dD_!!24284964.jpg_360x360Q90.jpg_.webp",oldPrice:3888,nowPrice:1890,title:"Apple/苹果 iPhone X 256G全网通4G智能手机国行",num:232},
        {id:4,img:"http://g-search3.alicdn.com/img/bao/uploaded/i4/i4/12573474/TB2hqD5clsmBKNjSZFFXXcT9VXa_!!12573474.png_360x360Q90.jpg_.webp",oldPrice:3888,nowPrice:1890,title:"Apple/苹果 iPhone X 5.8英寸手机 行货iphonex 苹",num:232},
        {id:5,img:"https://g-search2.alicdn.com/img/bao/uploaded/i4/i1/3587989841/O1CN016Nollw2MZEDv9WOIR_!!0-item_pic.jpg_360x360Q90.jpg_.webp",oldPrice:3888,nowPrice:1890,title:"Apple/苹果 iPhoneX苹果X 5.8寸国行iPhonex正品手",num:232},
        {id:6,img:"https://g-search1.alicdn.com/img/bao/uploaded/i4/i1/3419036250/O1CN01xqgmeI1w2Xwx5ODbE_!!0-item_pic.jpg_360x360Q90.jpg_.webp",oldPrice:3888,nowPrice:1890,title:"倍思iPhoneX钢化膜X苹果Xs手机xr全屏覆盖",num:232},
        {id:7,img:"https://g-search1.alicdn.com/img/bao/uploaded/i4/i3/125642673/TB2t0kQcIrI8KJjy0FhXXbfnpXa_!!125642673.jpg_360x360Q90.jpg_.webp",oldPrice:3888,nowPrice:1890,title:"颐和园|手机壳 苹果iPhoneX/XS/XR 华为",num:232},
        {id:8,img:"https://g-search3.alicdn.com/img/bao/uploaded/i4/i3/162432847/O1CN01GIeqbf1Wty5FyvD97_!!162432847.jpg_360x360Q90.jpg_.webp",oldPrice:3888,nowPrice:1890,title:"Apple/苹果 iPhoneX苹果X 5.8寸国行iPhonex正品手",num:232},
        {id:9,img:"https://g-search3.alicdn.com/img/bao/uploaded/i4/i2/2201533747269/O1CN01IVvHVW23ZFXx4a2QR_!!2201533747269.jpg_360x360Q90.jpg_.webp",oldPrice:3888,nowPrice:1890,title:"双皇冠Apple/苹果 iPhone X苹果x手机国行 全网",num:232},
      ]
    }
  }
 }
</script>

<style lang="" scoped>
.browsegoods{
  display:flex;
  justify-content: space-between;
  
  flex-wrap: wrap;
  margin: 10px 10px ;
}
.good{
  
  box-shadow: -1px -2px 8px rgb(158, 153, 153);
  width: 48%;
  padding: 3px;
  margin-bottom: 8px;
  display: flex;
  background: #fff;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  height: auto;
}
.title{
  font-size: 12px;
  line-height: 12px;
  font-weight: bold;
}
.good img{
  height: 66%;
  width: 95%;
}
.bottom{
  background: #e6e6e6;
  width:100%;
  height: 22%;
  padding: 5px 5px 10px 5px ;
  box-sizing: border-box;
}
.hot{
  font-size: 12px;
  color: #666;
  display:flex;
  padding-bottom: 3px ;
  box-sizing: border-box;
  justify-content: space-between;
}
.now-price{
  font-size: 15px;
  color:red;
}
.old-price{
  font-size: 10px;
  color:#777;
  text-decoration: line-through;
}
</style>